var tablePagination = function () {
  var Pagination = function (pageSize) {
    this.currentPage = 1;
    this.totalCount = 0;
    this.pageSize = 10;

    var self = this;
    var fn = {
      initData: function (pageSize) {
        self.pageSize = pageSize;
      }
    };

    if (pageSize !== undefined) {
      fn.initData(pageSize);
    }
  };

  var template = /* html */ `
    <div class="table-pagination" style="text-align:right;padding-top:5px">
      <el-pagination background :page-size.sync="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
        @current-change="handleChange" @size-change="handleChange" layout="sizes, prev, pager, next, jumper, total" 
        :page-sizes="pageSizes"></el-pagination>
    </div>
  `;

  return {
    Pagination: Pagination,
    TablePagination: {
      props: {
        pagination: {
          type: Object,
          required: true
        },

        pageSizes: {
          type: Array,
          default: function () {
            return [10, 15, 20, 40, 50, 100];
          }
        }
      },

      data: function () {
        return {
          timeout: null
        };
      },

      methods: {
        handleChange: function () {
          var timeout = this.timeout;
          if (timeout !== null) {
            clearTimeout(timeout);
          }

          var self = this;
          this.timeout = setTimeout(function () {
            self.$emit('change', self.pagination);
            self.timeout = null;
          }, 20);
        }
      },

      template: template
    }
  };
}();

var tablePaginationMixin = function (pageSize) {
  var vueData = {};

  var Pagination = tablePagination.Pagination;
  var TablePagination = tablePagination.TablePagination;
  if (pageSize === undefined) {
    pageSize = 10;
  }

  if (pageSize !== null){
    vueData.pagination = new Pagination(pageSize);
  }

  return {
    data: function () {
      return vueData;
    },

    methods: {
      pageChange: function () {}
    },

    components: {
      TablePagination: TablePagination
    }
  };
};